<template>
  <div class="listwarper">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      class="p-12"
    >
      <el-form-item label="" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入关键字"
          clearable
          style="width: 170px"
          @keyup.enter.native="handleQuery"
          suffix-icon="el-icon-search"
        />
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="queryParams.status"
          @change="handleQuery"
          style="width: 160px"
          placeholder="类型"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="queryParams.status"
          @change="handleQuery"
          style="width: 160px"
          placeholder="请选择标签"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="m_container">
      <!-- :width="itemWidth" :gutterWidth="gutterWidth"   -->
      <div class="m_content">
        <waterfall
          class="w_full"
          :col="3"
          :width="itemWidth"
          :gutterWidth="gutterWidth"
          :data="materialList"
          @loadmore="loadmore"
          @finish="finish"
        >
          <div
            v-for="(item, index) in materialList"
            :key="index"
            class="materialitem p-12"
            @click="handleItem(item)"
            :class="{ active: mItem&&mItem.id == item.id }"
          >
            <div class="pr-16 textover c_text2 fw-6 mb-8">
              {{ item.title || "-" }}
            </div>
            <div class="f-12 c_text3">2023-12-13 10:25:14</div>
            <div class="m_info mt-8 p-8">
              <div v-if="item.list[0]" class="my_content w_full">
                <div v-if="item.list[0].type == 1" class="bg_fff p-6">
                  {{ item.list[0].content }}
                </div>
                <img
                  v-if="item.list[0].type == 2"
                  :src="item.list[0].content"
                  alt=""
                  class="contentimg"
                />
              </div>
            </div>
            <div class="flexbetween mt-8">
              <div class="m_label c_888999 f-12">标签：</div>
              <div class="m_label c_888999 f-12">共{{item.list.length}}条</div>
            </div>
          </div>
        </waterfall>
      </div>
    </div>
    <div class="m_footer">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getMaterList"
        class="qwbpagination"
      />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      queryParams: {},
      total: 10,
      statusOptions: [],
      materialList: [
        {
          id: 1,
          title: "未命名素材1",
          list: [
            { type: 1, content: "今天周末1",checked:true },
            {
              type: 2,
              content:
                "https://cdn-qyb-hz.wxb.com/u/5424982/qyb/20240316/4081e7bcd776a146c59a49c0441521d3.png",
              checked:true 
            },
          ],
        },
        {
          id: 2,
          title: "未命名素材2",
          list: [{ type: 1, content: "今天周末2",checked:true  }],
        },
        {
          id: 3,
          title: "未命名素材3",
          list: [
            {
              type: 2,
              checked:true,
              content:
                "https://cdn-qyb-hz.wxb.com/u/5424982/qyb/20240316/4081e7bcd776a146c59a49c0441521d3.png",
            },
          ],
        },
        {
          id: 4,
          title: "未命名素材4",
          list: [
            { type: 1, content: "今天周末4",checked:true  },
            {
              type: 2,
              content:
                "https://cdn-qyb-hz.wxb.com/u/5424982/qyb/20240316/4081e7bcd776a146c59a49c0441521d3.png",
              checked:true 
            },
          ],
        },
        {
          id: 5,
          title: "未命名素材5",
          list: [
            { type: 1, content: "今天周末5",checked:true  },
            {
              type: 2,
              content:
                "https://cdn-qyb-hz.wxb.com/u/5424982/qyb/20240316/4081e7bcd776a146c59a49c0441521d3.png",
              checked:true 
            },
          ],
        },
        {
          id: 6,
          title: "未命名素材6",
          list: [
            { type: 1, content: "今天周末6",checked:true },
            {
              type: 2,
              content:
                "https://cdn-qyb-hz.wxb.com/u/5424982/qyb/20240316/4081e7bcd776a146c59a49c0441521d3.png",
              checked:true
            },
          ],
        },
        {
          id: 7,
          title: "未命名素材7",
          list: [
            {
              type: 2,
              content:
                "https://cdn-qyb-hz.wxb.com/u/5424982/qyb/20240316/4081e7bcd776a146c59a49c0441521d3.png",
              checked:true
            },
          ],
        },
        {
          id: 8,
          title: "未命名素材8",
          list: [
            { type: 1, content: "今天周末8",checked:true },
            {
              type: 2,
              content:
                "https://cdn-qyb-hz.wxb.com/u/5424982/qyb/20240316/4081e7bcd776a146c59a49c0441521d3.png",
              checked:true
            },
          ],
        },
      ],
      col: 2,
      loading: false,
      finished: false, //是否已完成
      itemWidth: 248,
      gutterWidth: 12,
      mItem: null,
    };
  },
  props: {
    materType: {
      default: "1",
    },
  },
  created(){
    this.handleItem(this.materialList[0])
  },
  methods: {
    handleQuery() {
      this.queryParams.page = 1;
      this.getMaterList();
    },

    loadmore() {
      if (this.loading || this.finished) {
        return;
      }
      this.getMaterList();
    },

    //渲染完成
    finish() {
      this.loading = false;
    },

    async getMaterList() {
      this.loading = true;

      this.finished = true;
      this.loading = false;
      // try {
      //   let res = await login_player_search({
      //     action_id: this.info.id,
      //     category: this.voteGroupName,
      //     page: this.currenPage,
      //     sort:this.sort,
      //     limit: 30,
      //     keycode:this.searchVal
      //   })
      //   //先判断有没有选中//加入选择状态
      //   res.data.data.list.forEach(item => {
      //     let result=this.choosePlayersList.find(items=>items.id== item.id)
      //     result?item.chooseStatue=true:item.chooseStatue=false
      //   });
      //   //如果为空结束加载
      //   if(res.data.data.list.length==0){
      //     this.loading=false
      //   }
      //   this.playerList=[...this.playerList,...res.data.data.list]
      //   this.toal=res.data.data.toal
      //   //如果总页数大于当前页数
      //   if(this.toal>this.currenPage){
      //     this.currenPage++
      //   }else if(this.toal<=this.currenPage){
      //     this.finished=true
      //   }
      // } catch (error) {

      // }
    },

    handleItem(item) {
      this.mItem = item
      // this.active = item.id;
      this.$emit("selectItem", item);
    },
  },
};
</script>
<style lang="scss" scoped>
.listwarper {
  height: calc(100% - 40px);
  position: relative;
}
.m_container {
  width: 100%;
  height: calc(100% - 117px);
  border-top: 1px solid #e9e9e9;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 16px 0;
}
.m_content {
  // height: 424px;
  height: 100%;
  width: 100%;
}
.materialitem {
  cursor: pointer;
  position: relative;
  margin-bottom: 16px;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #e9e9e9;

  &.active {
    border: 1px solid rgba(47, 84, 235, 0.85);
  }
}
.el-form-item {
  margin-bottom: 0;
}
.m_info {
  background-color: #f9f9f9;
}
.m_label {
  max-width: 200px;
}
.m_footer {
  height: 60px;
  position: sticky;
  bottom: 0;
  left: 0;
  padding: 10px 0 0;
}
.qwbpagination {
  // ::v-deep .pagination-container{
  justify-content: center;
  // }
}
.contentimg {
  max-width: 160px;
  max-height: 160px;
  cursor: pointer;
  border-radius: 5px;
  display: block;
}
</style>